<template>
  <div id="myBarChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getProvinceDisasterNum } from '@/api/geologicalDisaster.js';
const xAxisArr = ref([]);
const provinceLandslideNumArr = ref([]);
const provinceLiquefyingNumArr = ref([]);
const provinceSeismicSubsidenceNumArr = ref([]);
const provinceBreakNumArr = ref([]);
onMounted(() => {
  
  getProvinceDisasterNum().then((res) => {
    xAxisArr.value = res.data.map(item=>{return item.province})
    provinceLandslideNumArr.value = res.data.map(item=>{return item.provinceLandslideNum})
    provinceLiquefyingNumArr.value = res.data.map(item=>{return item.provinceLiquefyingNum})
    provinceSeismicSubsidenceNumArr.value = res.data.map(item=>{return item.provinceSeismicSubsidenceNum})
    provinceBreakNumArr.value = res.data.map(item=>{return item.provinceBreakNum})
    
    // 需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(document.getElementById("myBarChart"));
    // 绘制图表
    const option = {
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {
		  	top: 20,
        right: 20,
		  	textStyle: {
          color: "#fff",
          padding:[0,4]//文字与图形之间的左右间距
        },
        itemWidth: 10,    // 设置图例项的宽度为10像素
  			itemHeight: 10    // 设置图例项的高度为10像素
		  },
		  grid: {
		    left: '3%',
		    right: '4%',
		    bottom: '3%',
		    containLabel: true
		  },
		  dataZoom: [//滑动条
        {
          xAxisIndex: 0, //这里是从X轴的0刻度开始
          show: false, //是否显示滑动条，不影响使用
          type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 8, // 一次性展示几个。
        }
   	  ],
		  xAxis: [
		    {
		      type: 'category',
		      data: xAxisArr.value,
		      axisLabel: {
		      	interval: 0 ,
	          textStyle: {
	            color:' #fff',
	          },
	        },
		    }
		  ],
		  yAxis: [
		    {
		      type: 'value',
		      splitLine: {
            show: true,
            lineStyle: {
              color: ['#475ADB'],
              width: 1,
              type: 'dashed',
            },
         	},
		      //设置Y轴颜色
		      axisLabel: {
	          textStyle: {
	            color:' #fff',
	          },
	        },
		    }
		  ],
		  series: [
		    {
		      name: '地震滑坡',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#46FFFF'  // 设置地震滑坡的颜色
		      },
		      barWidth: 20,  // 设置柱宽度为 20 像素
		      data: provinceLandslideNumArr.value
		    },
		    {
		      name: '砂土液化',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#FFB35B'  // 设置砂土液化的颜色
		      },
		      data: provinceLiquefyingNumArr.value
		    },
		    {
		      name: '软土震陷',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#ED5385'  // 设置软土震陷的颜色
		      },
		      data: provinceSeismicSubsidenceNumArr.value
		    },
		    {
		      name: '地表破裂带',
		      type: 'bar',
		      stack: 'Ad',
		      emphasis: {
		        focus: 'series'
		      },
		      itemStyle: {
		        color: '#FF2525'  // 设置地表破裂带的颜色
		      },
		      data: provinceBreakNumArr.value
		    },
		  ]
		}
    var timer = null;
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
      // 每次向后滚动一个，最后一个从头开始；
      // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
      if (option.dataZoom[0].endValue == res.data.length - 1) {
        option.dataZoom[0].endValue = 4;
        option.dataZoom[0].startValue = 0;
      }
      else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option,true); // 这条不能省略；

		}, 2000);
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
	})
})

</script>
<style lang='scss' scoped>
#myBarChart{
  width: 420px;
  height: 205px;
  margin: 0 auto 0;
  font-size: 14px;
}
</style>